import Vue from 'vue'
// 自定义指令,列表回退返回之前的滚动位置
Vue.directive('scrollTo', {
  inserted(el) {
    el.addEventListener('scroll', function() {
      el.dataset.scrollTop = el.scrollTop
    })
  },
  update(el, binding, vnode) {
    if (vnode.context[binding.arg]) {
      el.scrollTop = el.dataset.scrollTop
      vnode.context[binding.arg] = false
    }
  }
})
// 去顶部,加在有滚动条的页面,会自动去顶端
Vue.directive('scrollTop', {
  componentUpdated(el) {
    el.scrollTop = 0
  }
})
// 点击事件防抖
// 不传参函数 v-debounce="[fnc,time]"
// 传参函数 v-debounce="[()=>{fnc(parms),time} ]"
Vue.directive('debounce', {
  inserted(el, binding) {
    let temp

    el.addEventListener('click', function() {
      const [fnc, wait = 1000] = binding.value

      if (temp) clearTimeout(temp)
      const flag = !temp
      temp = setTimeout(function() {
        temp = null
      }, wait)
      if (flag) fnc()
    })
  }

})
// 监听组件事件,实现v-on防抖
// 写法 v-debounce:组件事件名="[fnc,time]"
Vue.directive('debouncePlus', {
  inserted(el, binding, vnode) {
    let temp
    vnode.componentInstance.$on(binding.arg,
      function(val) {
        const [fnc, wait = 1000] = binding.value
        if (temp) clearTimeout(temp)
        const flag = !temp
        temp = setTimeout(function() {
          temp = null
        }, wait)
        if (flag) fnc(val)
      })
  }
})
// end

// 小元素拖拽
Vue.directive('dragMove', {
  bind: function(el, binding) {
    var touch, disX, disY

    el.ontouchstart = (e) => {
      console.info('拖拽的target', e)
      if (e.touches) { // 有可能对象在e上也有可能对象在e.touches[0]上
        touch = e.touches[0]
      } else {
        touch = e
      }
      disX = touch.clientX - el.offsetLeft // 鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
      disY = touch.clientY - el.offsetTop // 鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
    }
    el.ontouchmove = (e) => {
      if (e.touches) { // 有可能对象在e上也有可能对象在e.touches[0]上
        touch = e.touches[0]
      } else {
        touch = e
      }
      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      const left = touch.clientX - disX
      const top = touch.clientY - disY
      // 设置边界
      const leftBorder = left < 0 ? 0 : left > window.innerWidth - el.offsetWidth ? window.innerWidth - el.offsetWidth : left
      // console.log("视口的宽度", document.body.clientHeight)
      const topBorder = top < 0 ? 0 : top > window.innerHeight - el.offsetHeight ? window.innerHeight - el.offsetHeight : top
      // 移动当前元素
      el.style.left = leftBorder + 'px'
      el.style.top = topBorder + 'px'

      e.preventDefault() // 阻止页面的滑动默认事件
    }
    el.ontouchend = (e) => {
      // el.ontouchmove = null;
      // el.ontouchend = null;
    }
  },
  inserted(el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.zIndex = 9999
  }
})

// 点击其他区域关闭该模块
// 使用方法v-click-out="fnc"
Vue.directive('click-out', {
  bind: function(el, {
    value
  }) {
    document.documentElement.addEventListener('click', value, false)
  },
  unbind: function(el, {
    value
  }) {
    document.documentElement.removeEventListener('click', value, false)
  }
})
